<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<!-- 公共头部引入 header.html -->
<head th:replace="common/header"></head>
<style>
    .layui-form-item .layui-input-inline {
        float: left;
        width: 300px;
        margin-right: 10px;
    }
</style>

<body>
<!-- 正文开始 -->
<div class="layui-fluid" style="overflow: auto">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form toolbar" lay-filter="selFilter">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label w-auto">广播编号：</label>
                        <div class="layui-input-inline mr0">
                            <input type="text" id="ebmid" value="" placeholder="请填入广播编号模糊" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label w-auto">事件级别：</label>
                        <div class="layui-input-inline mr0">
                            <select id="eventLevel">
                                <option value="">---请选择---</option>
                                <option value="1">红(特别重大)</option>
                                <option value="2">橙(重大)</option>
                                <option value="3">黄(较大)</option>
                                <option value="4">蓝(一般)</option>

                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label w-auto">广播状态：</label>
                        <div class="layui-input-inline mr0">
                            <select id="status">
                                <option value="">---请选择---</option>
                                <option value="0">未处理</option>
                                <option value="1">播发中</option>
                                <option value="2">播发结束</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label w-auto">播发区域：</label>
                        <div id="demo1" class="layui-input-inline xm-select-demo"></div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label w-auto">开播时间段：</label>
<!--                        <div class="layui-input-inline">-->
<!--                            <input type="text" class="layui-input" id="startDate1" placeholder=" - ">-->
<!--                        </div>-->
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="startDate1" placeholder="开始 到 结束">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn icon-btn"
                                id="accountSearchButton">
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>
                        <button class="layui-btn icon-btn"
                                id="accountReloadButton" style="color: white">
                            <i class="layui-icon">&#xe669;</i>重置
                        </button>
                        <button class="layui-btn icon-btn"
                                id="accountExportButton" style="color: white">
                            <i class="layui-icon">&#xe669;</i>导出所有页
                        </button>
                    </div>
                </div>
            </div>
            <!-- 表格-->
            <div class="table_ma">
                <!-- id用作数据表格的渲染，lay-filter是过滤器，用于监听事件 -->
                <table id="broadcastTable" class="layui-hide" lay-filter="broadcastTable"></table>
            </div>
        </div>
    </div>
</div>

<!-- js部分 -->
<script type="text/javascript" th:inline="javascript">
    let tableIns;
    let region;
    let tree;
    const ebmid = $("#ebmid");

    layui.use(['layer', 'form', 'table', 'element', 'formSelects', 'admin', 'util', 'laydate'], function () {
        const $ = layui.jquery;
        const layer = layui.layer;
        const form = layui.form;
        const table = layui.table;
        const admin = layui.admin;
        const laydate = layui.laydate;
        getRegionName();
        let dataList;

        laydate.render({
            elem: '#startDate1'
            ,type: 'datetime'
            ,range: '~'
            ,format: 'yyyy-MM-dd HH:mm:ss'
        });

        tableIns = table.render({
            elem: '#broadcastTable',
            url: '/broadcast/listData',
            even: true,//开启隔行背景
            id: 'broadcastTable', //批量删除、审核时，点击事件选中表格
            method: 'post', //如果无需自定义HTTP类型，可不加该参数
            toolbar: '#heardLeftToolBar',	//表格头部工具栏区域
            cellMinWidth: 100,
            defaultToolbar: ['exports'],	//自由配置头部工具栏右侧的图标
            page: true,
            height: 'full-160',
            cols: [[
                // {checkbox: true, LAY_CHECKED: false, fixed: true}, //这里需要随便打点什么，不然thymeleaf报错
                {field: 'ebmId', title: '广播编号', align: 'center', sort: true},
                {
                    field: 'bcastType', title: '广播类型', align: 'center', sort: true, templet: function (d) {
                        return bcastTypeFormat(d.eventLevel)
                    }
                },
                {field: 'eventType', title: '事件类型代码', align: 'center', sort: true},
                {
                    field: 'eventLevel', title: '事件级别', align: 'center', sort: true, templet: function (d) {
                        return severityFormat(d.eventLevel)
                    }
                },
                {field: 'startTimeFact', title: '开始时间', align: 'center', sort: true},
                {field: 'endTimeFact', title: '结束时间', align: 'center', sort: true},
                {field: 'sourceCode', title: '发起人资源编码', align: 'center', sort: true},
                {
                    field: 'targetCodes', title: '目标区域', align: 'center', sort: true, templet: function (d) {
                        return regionNameFormat(d.targetCodes)
                    }
                },
                {
                    field: 'status', title: '广播状态', align: 'center', sort: true, templet: function (d) {
                        return brstatusFormat(d.status)
                    }
                }
            ]],
            done: function (res, curr, count) {
                dataList = res.data;
            },
        });

        /* 高级搜索 */
        $("#accountSearchButton").click(function () {
            const selectArr = demo1.getValue();
            let targetCodes = "";
            selectArr.forEach(function (element) {
                targetCodes += element.value + ",";
            });
            tableIns.reload({
                where: {
                    ebmId: ebmid.val(),
                    eventLevel: $("#eventLevel").val(),
                    status: $("#status").val(),
                    targetCodes: targetCodes,
                    startDate1: $("#startDate1").val(),
                    startDate2: $("#startDate2").val()
                },
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });

        /* 重置 */
        $("#accountReloadButton").click(function () {
            ebmid.val("");
            $("#eventLevel").val("")
            $("#status").val("")
            form.render('select', 'selFilter');
            tableIns.reload({
                where: {
                    eventLevel: null,
                    status: null,
                    ebmId: null
                },
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });

        $("#accountExportButton").click(function () {
            const selectArr = demo1.getValue();
            let targetCodes = "";
            selectArr.forEach(function (element) {
                targetCodes += element.value + ",";
            });
            admin.ajax({
                async: false,
                cache: false,
                url: '/broadcast/listData',
                type: 'POST',
                data: {
                    'page': "",
                    'limit': "",
                    'ebmId': ebmid.val(),
                    'eventLevel': $("#eventLevel").val(),
                    'status': $("#status").val(),
                    'targetCodes': targetCodes,
                    'startDate1': $("#startDate1").val(),
                    'startDate2': $("#startDate2").val()
                },
                dataType: 'json',
                success: function (data) {
                    let name = getTimeName();
                    table.exportFile('broadcastTable', data.data, 'xls', "播发历史记录" + name);
                },
                error: function (error) {
                    layer.msg("网络异常，请稍后尝试!", {icon: 2, shade: 0.4, time: 1500});
                }
            });
        });

        /* 工具栏监听 */
        table.on('tool(broadcastTable)', function (obj) {
            const data = obj.data; //获得当前行数据
            const layEvent = obj.event; //获得 lay-event 对应的值
        });

        window.regionTable = function () {
            tableIns.reload({
                where: {
                    name: region_name_search.val(),
                },
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        }

        const demo1 = xmSelect.render({
            el: '#demo1',
            autoRow: true,
            filterable: true,
            tree: {
                show: true,
                showFolderIcon: true,
                showLine: true,
                indent: 20,
                //默认展开节点的数组, 为 true 时, 展开所有节点
                expandedKeys: [-2],
                //是否严格遵守父子模式
                strict: false,
                //是否开启极简模式
                simple: false,
            },
            toolbar: {
                show: false,
                list: ['ALL', 'REVERSE', 'CLEAR']
            },
            filterable: true,
            height: 'auto',
            data: []
        });

        function getRegionName() {
            admin.ajax({
                async: false,
                cache: false,
                url: '/region/listData',
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    region = data.All;
                    tree = data.tree;
                },
                error: function (error) {
                    layer.msg("网络异常，请稍后尝试!", {icon: 2, shade: 0.4, time: 1500});
                }
            });
        }

        demo1.update({
            data: tree,
            autoRow: true,
        })
    });

    function severityFormat(severity) {
        let res = "";
        switch (severity) {
            case 1:
                res = "一级(特别重大)";
                break;
            case 2:
                res = "二级(重大)";
                break;
            case 3:
                res = "三级(较大)";
                break
            case 4:
                res = "四级(一般)";
                break
            default:
                res = "未知";
        }
        return res;
    }

    function brstatusFormat(brstatus) {
        let res = "";
        switch (brstatus) {
            case 0:
                res = "未处理";
                break;
            case 1:
                res = "播发中";
                break;
            case 2:
                res = "播发结束";
                break
            default:
                res = "未知";
        }
        return res;
    }

    function regionNameFormat(regionCode) {
        let codeArr = regionCode.split(",");
        let result = "";
        for (let i = 0; i < codeArr.length; i++) {
            let code;
            switch (codeArr[i].length) {
                case 24:
                    code = codeArr[i].substring(2, 14);
                    break;
                case 12:
                    code = codeArr[i];
                    break;
                default:
                    continue;
            }
            for (let j = 0; j < region.length; j++) {
                if (region[j].code == code) {
                    result += region[j].name + ",";
                }
            }
        }
        let strings = result.split(",");
        let strings1 = Array.from(new Set(strings));
        strings1 = strings1.filter(item => item)
        return strings1.join();
    }

    function bcastTypeFormat(bcastType) {
        let res = "";
        switch (bcastType) {
            case 4:
                res = "应急广播";
                break;
            case 5:
                res = "日常广播";
                break;
            default:
                res = "未知";
        }
        return res;
    }

    function getTimeName() {
        const now = new Date();
        const year = now.getFullYear();
        const month = ('0' + (now.getMonth() + 1)).slice(-2);
        const day = ('0' + now.getDate()).slice(-2);
        const hours = ('0' + now.getHours()).slice(-2);
        const minutes = ('0' + now.getMinutes()).slice(-2);
        const seconds = ('0' + now.getSeconds()).slice(-2);
        return year + month + day + hours + minutes + seconds;
    }


</script>
</body>
</html>